<template>
  <div class="page-txnret">
    <myHeader :head-title="titleShow"></myHeader>
    <div class="content_title_style">{{msgShow}}</div>
    <section class="contetn_description" v-if="acctRetSucc">
      <img src="static/image/description.png" height="24" width="24">
      <router-link to="/balance/errdesc" class="err_detail">错误详情</router-link>
    </section>
    <section class="content_container">
      <section class="content">
        <div class="content_header">
          <span class="content_title_style">账户类型</span>
          <section class="contetn_description content_title_style">{{$route.query.acctTpBiz}}</section>
        </div>
        <div class="content_header">
          <span class="content_title_style">{{amtDescShow}}</span>
          <section class="contetn_description content_title_style">{{amtShow}}</section>
        </div>
      </section>
    </section>

    <router-link to="/balance" class="info-router">
      <div class="finish_button">完成</div>
    </router-link>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'

  export default {
    data(){
      return{
      }
    },
    components:{
      myHeader
    },
    computed: {
      ...mapGetters([
        'acctInf',
        'acctRetSucc',
        'acctErrcd',
        'acctErrmsg'
      ]),
      titleShow: function() {
        return this.$route.query.bizDesc + "详情";
      },
      msgShow: function() {
        console.log("acctErrcd:", this.acctErrcd);
        if (this.acctErrcd.substring(2) === "0000") {
          return this.$route.query.bizDesc + "成功";
        }
        else {
          return this.$route.query.bizDesc + "失败";
        }
      },
      amtDescShow: function() {
        return this.$route.query.bizDesc + "金额";
      },
      amtShow: function() {
        return this.$route.query.odrAmt === null ? 0.00 : this.$route.query.odrAmt;
      }
    }
  }
</script>


<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-txnret {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .finish_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $blue;
  }
  .content_title_style {
    text-align: center;
  }
  .contetn_description{
      font-size: .55rem;
      text-align: center;
      display: flex;
      align-items: center;
      img{
          @include wh(.6rem, .6rem);
          margin-right: .2rem;
      }
  }
  .content_container{
      padding: .3rem;
      .content{
          padding: .4rem;
          background-color: #fff;
          border-radius: .15rem;
          .content_header{
              @include fj;
              font-size: .55rem;
              .contetn_description{
                  display: flex;
                  align-items: center;
                  img{
                      @include wh(.6rem, .6rem);
                      margin-right: .2rem;
                  }
                  .content_title_style{
                      color: $blue;
                  }
              }
              .content_title_style{
                  color: #666;
              }
          }
          .content_num{
              span:nth-of-type(1){
                  @include sc(1.8rem, #333);
              }
              span:nth-of-type(2){
                  @include sc(.7rem, #333);
              }
          }

      }
  }
</style>